<template>
	<div class="iconList">
		<h2 class="titleName">
			<img class='titleNameImg' src="@/assets/img/rBLkBlqo1SmAXKh2AAATQxd5x9Q718.png"> 热门推荐
		</h2>
		<div class="wrapper clearfix">
			<div class="wrap">
				<div class="icon clearfix" v-for='item of HotAdressName' :key='item.id'>
					<div class="wrap2">
						<div class="icon_desc">{{item.adress}}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="line"></div>
		<div class="hotImg clearfix">
			<div class="imgContent clearfix" v-for='item of HotImgContent' :key='item.id'>
				<div class="imgContent_wrap">
					<img class='img' :src="item.imgUrl" >
					<span class="imgSpan">
						{{item.title}}
						<i class="imgIcon"></i>
					</span>
					<p class="imgP">{{item.content}}</p>
				</div>
			</div>
		</div>
		<p class="more">查看更多玩法</p>
	</div>

</template>

<script>
export default {
  name: 'homeHotRecommend',
  props:{
  	  HotImgContent:Array,
	  HotAdressName:Array,
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.iconList
	width:100%
	text-align:center
	.line
		width:100%
		height:1px
		border-top:1px solid #e4e4e4
	.titleName
		margin-top:20px
		.titleNameImg
			width:4%
	.wrapper
		width:100%
		padding:10px 0
		.wrap
			width:90%
			margin:10px auto
			.icon
				float:left
				width:25%
				display: block
				margin-bottom:10px
				.wrap2
					width:90%
					margin:0 auto
					.icon_desc
						width:100%
						background:#f4f4f4
						border-radius:50px
						height:35px
						line-height:35px
						text-align:center
						font-size:8px
						font-weight:bold
	.more
		color:blue
		margin-bottom:20px
	.hotImg
		width:90%
		position:relative
		margin:10px auto
		.imgContent
			width:50%
			float:left
			position:relative
			text-align:center
			display: block
			.imgContent_wrap
				width:95%
				position:relative
				margin:5px auto
				.img
					width:100%
					border-radius:5px
				.imgSpan
					position:absolute
					top:0
					left:0
					background:#fc5446
					color:#fff
					height:15px
					padding:1px 2px
					display: block
					border-top-left-radius:5px
					font-size:8px
					line-height:15px
					.imgIcon
						position: absolute
						display: inline-block
						width: 0
						height: 0
						right: -17px
						top: 0
						border-top: 17px solid #fc5446
						border-right: 17px solid transparent
				.imgP
					color:#fff
					position:absolute
					bottom:10px
					font-size:10px
					padding-left:10px
					font-weight:bold
.clearfix:after
	display:block
	content:''
	clear:both
</style>
